<template>
  <div>
    <template v-if="hasPerm('system:user:query')">
      <span style="font-size: 13px"> 姓名：</span>
      <el-input v-model="query.name" size="small" placeholder="输入姓名模糊查询" style="width: 140px"></el-input>
      <span style="font-size: 13px"> 手机号：</span>
      <el-input v-model="query.telephone" size="small" placeholder="输入手机模糊查询" style="width: 140px"></el-input>
      <span style="font-size: 13px"> 邮箱：</span>
      <el-input v-model="query.email" size="small" placeholder="输入邮箱模糊查询" style="width: 140px"></el-input>
      <span style="font-size: 13px"> 状态：</span>
      <el-select v-model="query.status" size="small" style="width: 140px" clearable placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      &nbsp;
      <el-button type="primary" icon="el-icon-search" size="small" @click="queryPage()" style="margin-left: 5px">搜索</el-button>
      <el-divider direction="vertical"></el-divider>
    </template>
    <el-button v-if="hasPerm('system:user:add')" type="primary" size="small" @click="addUserDialog = true">添加用户</el-button>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="name"
          label="姓名"
          width="220">
      </el-table-column>
      <el-table-column
          prop="telephone"
          label="手机号"
          width="220">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="220">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '0' ? 'danger' : 'success'"
              disable-transitions>{{scope.row.status === '0' ? '冻结' : '正常'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <template v-if="hasPerm('system:user:detail')">
                <el-dropdown-item icon="el-icon-edit" @click.native="getDetail(scope.$index, scope.row);userDetailDialog=true">详情</el-dropdown-item>
              </template>
              <template v-if="hasPerm('system:user:setPass')">
                <el-dropdown-item icon="el-icon-key" @click.native="setPassword(scope.$index, scope.row);setPassDialog=true">密码</el-dropdown-item>
              </template>
              <template v-if="hasPerm('system:user:freeze')">
                <el-dropdown-item icon="el-icon-lock" @click.native="freezeFun(scope.$index, scope.row)">冻结/解冻</el-dropdown-item>
              </template>
              <template v-if="hasPerm('system:user:delete')">
                <el-dropdown-item icon="el-icon-delete" @click.native="deleteFun(scope.$index, scope.row)">删除</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[5,10, 20, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="添加用户" :visible.sync="addUserDialog" center width="40%">
        <el-form :model="addUser" ref="addUser" :rules="rules" :label-width="formLabelWidth">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="addUser.name" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="手机号"prop="telephone">
            <el-input v-model="addUser.telephone" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addUser.email" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="deptId">
            <el-input v-model="addUser.deptName" :disabled="true" size="small" style="width: 56%"></el-input>
            <el-button type="primary" size="small" @click="addUserCheckDeptDialog = true;getDeptTree()">选择部门</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
            center
            width="30%"
            title="选择部门"
            :visible.sync="addUserCheckDeptDialog"
            append-to-body>
          <el-tree :data="deptData" :props="deptProps" @node-click="addUserDeptNodeClick"></el-tree>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addUserDialog = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveUser('addUser')" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="用户详情" :visible.sync="userDetailDialog" center width="40%">
        <el-form :model="userDetail" ref="userDetail" :rules="rules" :label-width="formLabelWidth">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="userDetail.name" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="userDetail.telephone" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userDetail.email" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="deptId">
            <el-input v-model="userDetail.deptName" :disabled="true" style="width: 56%" size="small"></el-input>
            <el-button type="primary" @click="userDetailCheckDeptDialog = true;getDeptTree()" size="small">选择部门</el-button>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="userDetail.status" size="small" style="width: 100px" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="userDetail.createTime" :disabled="true" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="userDetail.creator" :disabled="true" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="更新人">
            <el-input v-model="userDetail.updator" :disabled="true" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="userDetail.updateTime" :disabled="true" size="small" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <el-dialog
            center
            width="30%"
            title="选择部门"
            :visible.sync="userDetailCheckDeptDialog"
            append-to-body>
          <el-tree :data="deptData" :props="deptProps" @node-click="UserDetailDeptNodeClick"></el-tree>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
          <el-button @click="userDetailDialog = false" size="small">取 消</el-button>
          <el-button type="primary" @click="updateUser('userDetail')" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="设置密码" :visible.sync="setPassDialog" width="40%" center>
        <el-form :model="setPass" ref="setPass" :rules="rules" :label-width="formLabelWidth">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="setPass.name" :disabled="true" size="small" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="setPass.password" size="small" show-password style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="再次输入密码" prop="password">
            <el-input v-model="setPass.rePassword" show-password size="small" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setPassDialog = false" size="small">取 消</el-button>
          <el-button type="primary" @click="setPassFuntion('setPass')" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {
  getPageUserByCondition,
  getPageUser,
  saveUser,
  getUserDetail,
  updateUser,
  updatePassword,
  freezeUser,
    deleteUser
} from '@/api/user/index'
import { regular } from '@/utils/validate'
import { getDeptTree } from '@/api/dept/index'

export default {
  data() {
    return {
      freeze:{},
      setPass:{},
      isGetDeptTree:false,
      userDetail:{},
      deptData: [],
      deptProps: {
        children: 'sonDeptTreeList',
        label: 'name'
      },
      addUserCheckDeptDialog:false,
      userDetailCheckDeptDialog:false,
      addUserDialog:false,
      userDetailDialog:false,
      setPassDialog:false,
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        telephone: [
          { pattern:regular.mobile,message: regular.mobileMsg, trigger: 'blur'},
          {required: true, message: '请输入手机号码', trigger: 'blur'}
        ],
        email:[
          {pattern:regular.email,message:regular.emailMsg,trigger: 'blur'},
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        status:[
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        deptId:[
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        password:[
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ]
      },
      formLabelWidth: '120px',
      addUser:{name:'',telephone:"",email:'',deptId:'',status:'',deptName:''},
      query:{
        name:'',
        telephone:'',
        email:'',
        status:''
      },
      page:{
        pageNo: 1,
        pageSize: 5,
        total: 1
      },
      options: [{
        value: '0',
        label: '冻结'
      }, {
        value: '1',
        label: '正常'
      }],
      status: '',
      tableData: []
    }
  },
  created() {
    this.getPageUser(this.page);
  },
  methods : {
    deleteFun(index,row){
      deleteUser(row.id).then(res =>{
        this.getPageUser(this.page);
      })
    },
    freezeFun(index,row){
      let user = row;
      if (row.status == '0'){
        user.status = '1'
      }else {
        user.status = '0'
      }
      freezeUser(user).then(res =>{
        this.showMessage(user.status=='0'?'冻结成功':'解冻成功');
        this.getPageUser(this.page);
      })

    },
    setPassword(index,row){
      this.setPass.name = row.name;
      this.setPass.id = row.id;
    },
    setPassFuntion(formName){
      this.$refs[formName].validate(validate =>{
        if (validate){
          if (this.setPass.password == this.setPass.rePassword){
            updatePassword(this.setPass).then(res =>{
              this.showMessage("更新成功")
              this.setPassDialog=false;
              this.setPass = {}
            })
          }else {
            this.showErrorMessage('两次密码不一致')
          }
        }
      })
    },
    getDetail(index,row){
      // console.log(row.id)
      getUserDetail(row.id).then(res =>{
        this.userDetail = res.data.user;
        this.userDetail.deptName = res.data.deptName;
      })
    },
    getDeptTree() {
      if (this.isGetDeptTree==true){
        return;
      }
      getDeptTree().then(res => {
        this.deptData = res.data;
        console.log(res.data)
      })
    },
    saveUser(formName){
      this.$refs[formName].validate(validate =>{
        if (validate){
          this.addUser.status = '1';
          saveUser(this.addUser).then(res =>{
            this.showMessage("添加成功");
            this.getPageUser(this.page);
            this.addUserDialog=false;
            this.addUser={};
          })

        }
      })
    },
    updateUser(formName){
      this.$refs[formName].validate(validate =>{
        if (validate){
          updateUser(this.userDetail).then(res =>{
            this.showMessage("修改成功");
            this.getPageUser(this.page);
            this.userDetailDialog = false
          })

        }
      })
    },
    queryPage(){
      this.page={pageNo: 1, pageSize: 5, total: 1}
      getPageUserByCondition(this.page,this.query).then(res =>{
        this.page.total = res.data.total
        this.tableData = res.data.records;
      })
    },
    getPageUser(page){
      getPageUser(page).then(res =>{
        this.page.total = res.data.total
        this.tableData = res.data.records;
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getPageUser(this.page);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.pageNo = val;
      this.getPageUser(this.page);
    },
    addUserDeptNodeClick(data) {
      this.addUser.deptId = data.id;
      this.addUser.deptName = data.name;
      this.addUserCheckDeptDialog = false;
    },
    UserDetailDeptNodeClick(data){
      this.userDetail.deptId = data.id;
      this.userDetail.deptName = data.name;
      this.userDetailCheckDeptDialog = false;
    },
    stateFormat(row, column) {
      if (row.status == '0') {
        return '冻结'
      } else  {
        return '正常'
      }
    },
    showMessage(message) {
      this.$message({
        showClose: true,
        message: message,
        type: 'success'
      });
    },
    showErrorMessage(message) {
      this.$message({
        showClose: true,
        message: message,
        type: 'error'
      });
    }
  }

}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
